import React from 'react';
import MessageHeader from './MessageHeader';
import MessageList from './MessageList';
import MessageFooter from './MessageFooter';

export default class MessageBox extends React.Component{
   state = {
       messages:[]
   }
   //当组件将要挂载到页面的时候，从本地缓存中读取messages
   //本地持久化缓存
   //cookie 服务器写给客户端之后，客户端每次访问服务器都会把cookie发送给服务器
   //localStorage 浏览器关闭之后不会被销毁,没有失效时间，而且也不会发送给服务器
   //sessionStorage 浏览器关闭之后就会被销毁
   componentWillMount(){
    let messagesStr = sessionStorage.getItem('messages');
    if(messagesStr){
        let messages = JSON.parse(messagesStr);
        this.setState({messages});
    }
   }
   //把messages数据保存到localStorage里面来
   save=()=>{
    window.sessionStorage.setItem('messages',JSON.stringify(this.state.messages));
   }
   addMessage = (message)=>{
      let messages =  this.state.messages;
      //如果数组是空的，id=1,如果不空，那个id就是最大的id加1
      message.id = messages.length==0?1:messages[messages.length-1].id+1;
      message.createAt = new Date();
      //因为setState修改状态是异步的，所以说如果要获取新的状态值，必须用回调函数
      this.setState({messages:[...messages,message]},this.save);
   }
   delMessage = (id)=>{
     //过滤数组，留下ID不相等的,如果相等则干掉
     let messages = this.state.messages.filter(function(item){
        return item.id != id;
     });
     this.setState({messages},this.save);
   }
   render(){
       return (
           <div className="container" style={{marginTop:'50px'}}>
                <div className="row">
                    <div className="col-md-6 col-md-offset-3">
                            <div className="panel panel-default">
                                <MessageHeader/>
                                <MessageList 
                                  delMessage={this.delMessage}
                                  messages={this.state.messages}/>
                                <MessageFooter addMessage={this.addMessage}/>
                            </div>
                    </div>
                </div>
           </div>
       )
   }
}